Сложность урока: Средний
Делаем шаблон адаптивным под различные устройства, на примере шаблона Protostar в Joomla 3

Заключительный урок по редактированию стандартного шаблона Joomla я решил посвятить адаптации под мобильные устройства. Мы поговорим о том, как сделать шаблон пригодным для просмотра на всех устройства без исключения, будь то компьютер с высоким разрешением экрана или обычный мобильный телефон.

Сам по себе шаблон Protostar использует bootstrap и уже является адаптивным, однако, после внесения в него каких либо изменений (изменение шапки сайта, футера или области контента) мы можем нарушить его адаптивность. Следовательно, это нужно исправить.

Урок будет построен следующим образом, сначала я расскажу о том, как пользоваться панелью устройств браузера Google Chrome, а затем мы приступим к редактированию нашего шаблона и сделаем его адаптивным при помощи медиа-запросов.

Панель переключения устройств

Для того чтобы посмотреть как наш сайт будет выглядеть на различных устройствах в браузере от Гугла есть замечательный инструмент – панель переключения устройств (toggle device toolbar).

Открывается данная панель нажатием сочетаний клавиш Ctrl+Shift+M или по средствам нажатия на соответствующую кнопку вверху панели разработчика:

Панель переключения устройств в браузере Google Chrome

После того как мы открыли панель переключения устройств мы можем выбрать из предложенного списка одно из устройств и посмотреть как будет выглядеть сайт на данном устройстве. Либо выбрать Responsive и ввести значения ширины и высоты экрана по своему усмотрению:

Выбираем нужное устройство или вносим значения высоты и ширины экрана вручную

Таким образом, можно играя со значениями ширины и высоты экрана посмотреть на наш сайт глазами пользователей мобильных устройств и по необходимости внести соответствующие корректировки в дизайн.

Делаем сайт адаптивным

А теперь давайте попробуем выявить недостатки в дизайне сайта и попробуем их исправить. И начнем, пожалуй, с основной части сайта.

Изначально тело сайта в шаблоне Protostar имеет отступы по всем краям в размере 20 пикселей, считаю это слишком расточительным особенно для устройств с небольшими экранами. Поэтому предлагаю изначально избавиться от этих отступов.

Отступы в теле сайта от которых надо избавиться в мобильной версии сайта

Причем надо сделать так чтобы на устройствах с большими экранами отступы остались, а на телефонах или планшетах их не было. Для этих целей отлично подойдет медиа-запрос, но для начала необходимо определиться какая ширина экрана должна быть у устройства, на котором не должно быть отступов в теле сайта.

Я решил, что отступы не нужны на устройствах с шириной экрана 420 пикселей и менее (просто не встречал еще телефонов, у которых ширина больше). В результате медиа-запрос будет таким:

@media (max-width: 420px){ /*Ширина экрана 420 пикселей и менее*/
}

Теперь надо определить какой из блоков на странице дает отступы, это оказался блок <body> с классом site, у которого значение padding было 20 пикселей. Пишем новое значение свойства и вставляем его в наш файл стилей:

@media (max-width: 420px){ /*При такой ширине*/
 body.site {padding: 20px;} /*убираем отступы в теле сайта*/
}

Сохраняем файл стилей и смотрим на результат:

Мы избавились от отступов тем самым увеличили полезную ширину страницы сайта

Идем дальше, теперь необходимо проверить, как будет отображаться на мобильных устройствах наше горизонтальное меню. Я обнаружил, что при ширине экрана 420 пикселей меню отображается корректно, но уже при ширине 408 пикселей начинает съезжать и тем больше чем меньше ширина экрана:

Горизонтальное меню начинает съезжать при ширине экрана 396 пикселей, придется его переделать.

Чтобы от этого избавиться придется сделать меню вертикальным, лично я считаю, что такое меню будет смотреться гораздо лучше. К счастью много свойств писать не пришлось, необходимо всего на всего увеличить ширину пункта меню до 100%. Пишем медиа-запрос и добавляем в него свойство ширины пункта меню:

@media (max-width: 408px){
 ul.nav.menu_horizontal li {width: 100%;} /*ширина пункта меню 100%*/
}

Теперь можно посмотреть на результат и убедиться в том, что наше меню на мобильных устройствах с шириной 408 пикселей и менее будет вертикальным, а на больших экранах останется горизонтальным:

Горизонтальное и вертикальное меню в зависимости от ширины экрана

Таким не хитрым способом мы изменили оформление меню и теперь можем быть уверенны, что с ним будет удобно работать на различных устройствах.

На следующем этапе можно скрыть (по желанию) отображение информации о материале (дата создания, изменения и прочее) на мобильных устройствах. Для этого надо написать свойство display: none; для указанной ширины экрана.

Других аномалий в области контента я не заметил, все отображается корректно. Зато есть значительные недочеты в футере сайта, ведь он был сделан вручную:

Футер сайта не является адаптивным, надо это исправить

Для редактирования футера чтобы придать ему адаптивность придется писать множество медиа-запросов для различного значения ширины экрана. Что делать, надо так надо, у меня получилось 8 медиа-запросов для экранов со значением ширины от 685 до 300 пикселей:

@media (max-width: 685px){/*Для футера*/
 .foot-left {width: 25%;}
}

@media (max-width: 550px){/*Для футера*/
 .foot-left {width: 27%;}
}

@media (max-width: 510px){/*Для футера*/
 .foot-left {width: 30%;}
}

@media (max-width: 465px){/*Для футера*/
 .foot-left {width: 35%;}
}

@media (max-width: 420px){ /*При такой ширине*/
 .foot-left {width: 80%;margin-left: 5px;}
 .foot-right {float: right;margin-top: 10px;}
}

@media (max-width: 408px){
 ul.nav.menu_horizontal li {width: 100%;} /*ширина пункта меню 100%*/
}

@media (max-width: 360px){/*Для футера*/
 .foot-left {width: 79%;}
}

@media (max-width: 300px){/*Для футера*/
 .foot-left {width: 75%;}
}

В результате мы получили отличный футер, адаптированный под различные устройства:

Мы отредактировали футер и теперь он адаптирован под различные устройства

В заключении хочу отметить что сделать шаблон адаптивным достаточно просто, главное иметь представление того что вы хотите увидеть в конечном итоге и немного практики.

Как и обещал, выкладываю мои файлы index.php и mycss.css, которые можно скачать, возможно, они Вам пригодятся.

Добавить комментарий